<template>
 
		<div style="z-index: 2;display: flex;justify-content: flex-start;
		background-color: rgb(243, 244, 246);
		height:11%;
		position: fixed;top: 0;left: 0;width: 100%;
		border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
		text-align: center;width: 100px;line-height: 11vh;">Aria
			</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{ this.$store.state.borderflag }}</div>
			<span style="width: 5%;"></span>
			<div style="line-height: 11vh;" v-if="this.$store.state.isLogin===true">欢迎，{{this.$store.state.username}}</div>
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					<i class="el-icon-arrow-down el-icon--right" style="color: #000000;"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="a">个人中心</el-dropdown-item>
					<el-dropdown-item command="b">门户系统</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span style="width: 30px;"></span>
			<div style="line-height: 11vh;" >欢迎，jdfdsfdsfdsfdsfdasjj</div>
			<button class="logout" style="height: 40px;position: absolute;right:30px;" v-if="this.$store.state.isLogin===false" @click="gotoLogin">登录</button>
			<button class="logout" style="height: 40px;position: absolute;right:30px;" v-if="this.$store.state.isLogin===true" @click="outLogin">退出登录</button>
		</div>
</template>

<script>
export default {
  name: "Border",
  methods:{
    gotoLogin(){
      this.$router.push("/login");
    },
    outLogin(){

      this.$store.state.isLogin=false;
      const self = this;
      this.isLogin=false;
      this.$store.username='',
          this.$store.useremail='',
          this.$store.userphone='',

          self.axios({
            method: 'post',
            url: '/outlogin/',
            data: {
              'username':this.$store.state.username
            },
            headers: {
              'X-CSRFToken': this.getCookie('csrftoken')
            },
          })
      this.$store.state.username="";
    },
    testclick() {
      // var a = document.getElementById("searchBtn")
      // this.axios({
      // 	method: 'post',
      // 	url: '/searchtest/',
      // 	data: {
      // 		'keyword': a.value
      // 	},
      // 	headers: {
      // 		'X-CSRFToken': this.getCookie('csrftoken')
      // 	},
      // }).then(res => {
      // 	var obj = JSON.parse(res.data);
      // 	//[['文件名','作者名',...],[],[]]
      // 	for (let i = 0; i < obj.length - 1; i++) {
      // 		console.log(obj[i]);
      // 	}
      // })

      this.$router.push("/search/" + this.search_text)
    },
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>